<template>  
  <a-space direction="vertical" class="space-style" :size="[0, 48]">  
    <a-layout>
      <a-layout-sider class="sider-style">
        <side />
      </a-layout-sider>  
      <a-layout-content class="content-style">
        <message/>
      </a-layout-content>  
    </a-layout>  
  </a-space>  
</template>  
  
<script lang="ts" setup>  
import message from './components/message.vue';
import side from './components/side.vue';

</script>  
  
<style lang="less">  
#app {
  .space-style {  
    width: 100%;  
    height: calc(100vh - 48px);  
  }  
    
  .content-style {  
    height: calc(100vh - 48px); 
  }  
    
  .sider-style {  
    height: calc(100vh - 48px);  
    width: 400px;  
    text-align: center;  
    line-height: 120px;  
    color: #000;  
    background-color: #fff;  
  }
  .ant-layout-sider ant-layout-sider-dark sider-style {
    width: 300px;
  }
}
</style>